<template>
  <div class="Row_content" style="width:890px;">
    <Form inline ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="150">
      <FormItem label="消息模板名称:" prop="templateName">
        <Input v-model="formValidate.templateName" placeholder="请输入" :maxlength="50" class='input-wid'></Input>
      </FormItem>
      <FormItem label="消息模板类型:" prop="templateType">
        <Select v-model="formValidate.templateType" class='input-wid'>
          <Option v-for="(item, index) in templateTypeList" :value="item.value" :key="index">{{item.label}}</Option>
        </Select>
      </FormItem>
      <FormItem label="第三方模板:">
        <Input v-model="formValidate.refCode" placeholder="请输入" :maxlength="50" class='input-wid'></Input>
      </FormItem>
      <FormItem label="适用产品:" prop="suitableType">
        <Select v-model="formValidate.suitableType" class='input-wid'>
          <Option :value="item.value" v-for="(item, index) in messageActivityList" :key="index">{{item.label}}</Option>
        </Select>
      </FormItem>
      <FormItem label="消息模板内容:" prop="content" style="width: 830px">
        <Input v-model="formValidate.content"
          type="textarea" style="width:720px"
          :autosize="{ minRows: 5, maxRows: 8 }"
          :maxlength="300"
          placeholder="请输入内容"></Input>
        <div style="text-align:right;width:720px;color:#c5c8ce;">{{formValidate.content.length}}/300</div>
      </FormItem>
      <FormItem>
        <Button type="primary" class="btn" @click="handleSubmit">确定</Button>
        <Button class="btn" style="margin-left: 24px" @click="handleReset">取消</Button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
import { routeEqual } from '@/libs/util'
import { mapState } from 'vuex'
import { saveMessage, getMessages } from '@/api/market/message.js'
import enumsMixin from '../enums.js'
export default {
  name: 'market_messagetemplate_edit',
  mixins: [enumsMixin],
  data () {
    return {
      id: '',
      submitLock: false,
      formValidate: {
        templateName: '',
        templateType: 1,
        suitableType: '',
        refCode: '',
        content: ''
      },
      ruleValidate: {
        templateName: { required: true, message: '请填写消息模板名称', trigger: 'blur' },
        templateType: { required: true, message: '请选择消息模板类型' },
        suitableType: { required: true, message: '请选择适用产品' },
        content: { required: true, message: '请填写消息模板内容', trigger: 'blur' }
      }
    }
  },
  computed: {
    ...mapState({
      merchantId: state => state.user.merchantId,
      userId: state => state.user.userId,
      userName: state => state.user.userName
    })
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (vm.id !== to.params.id) {
        vm.id = to.params.id
        vm.getDetail()
      }
    })
  },
  methods: {
    // filterName () {
    //   this.formValidate.couponName = this.formValidate.couponName.replace(/[^0-9A-Za-z\u4e00-\u9fa5]/, '')
    // },
    getDetail () {
      this.id = this.$route.params.id
      getMessages({
        merchantId: this.merchantId,
        id: this.id
      }).then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          let data = result.data[0]
          this.formValidate = {
            templateName: data.templateName,
            templateType: data.templateType,
            suitableType: data.suitableType,
            refCode: data.refCode,
            content: data.content
          }
        } else {
          this.$Message.error(`${result.error}`)
        }
      })
    },
    handleSubmit () {
      this.$refs.formValidate.validate(val => {
        console.log(val)
        if (val) {
          if (this.submitLock) {
            return
          }
          this.submitLock = true
          let params = {
            merchantId: this.merchantId,
            id: this.id,
            ...this.formValidate
          }
          saveMessage(params).then(res => {
            this.submitLock = false
            const result = res.data || {}
            if (result.status === 200) {
              this.$Message.success('编辑成功')
              this.handleReset()
            } else {
              this.$Message.error(`${result.error}`)
            }
          }).catch(err => {
            this.submitLock = false
            this.$Message.error(`${err}`)
          })
        }
      })
    },
    handleReset () {
      this.$store.commit('closeTag', this.$route)
      this.$store.commit('setTagNavList', this.$store.state.app.tagNavList.filter(item => !routeEqual(this.$route, item)))
      this.$nextTick(() => {
        this.$router.push({
          name: 'market_messagetemplate_list'
        })
      })
    }
  }
}
</script>
<style scoped>
.input-wid{ width: 280px;}
</style>
